<template>
    <div class="home">
        <y-header></y-header>
        <div v-loading="loading" element-loading-text="加载中..." style="min-height: 35vw;" v-if="!error">
            <div class="banner">
                <div class="bg" ref="bg"
                     @mouseover="bgOver($refs.bg)" @mousemove="bgMove($refs.bg,$event)" @mouseout="bgOut($refs.bg)">
                    <transition name="fade">
                        <div v-for="(item, i) in banner" v-if="i===mark" :key="i" style="position:absolute"
                             @click="linkTo(item)" @mouseover="stopTimer" @mouseout="startTimer">
                            <img v-if="item.picUrl" class="img1" :src="item.picUrl"/>
                            <img v-if="item.picUrl2" class="img2 a" :src="item.picUrl2"/>
                            <img v-if="item.picUrl3" class="img3 b" :src="item.picUrl3"/>
                        </div>
                    </transition>
                </div>
                <div class="page">
                    <ul class="dots">
                        <li class="dot-active" v-for="(item, i) in banner" :class="{ 'dot':i!=mark }" :key="i"
                            @click="change(i)"></li>
                    </ul>
                </div>
            </div>

            <div v-for="(item,i) in home" :key="i">

                <div class="activity-panel" v-if="item.type === 1">
                    <ul class="box">
                        <li class="content" v-for="(iitem,j) in item.panelContents" :key="j" @click="linkTo(iitem)">
                            <img class="i" :src="iitem.picUrl">
                            <a class="cover-link"></a>
                        </li>
                    </ul>
                </div>

                <section class="w mt30 clearfix" v-if="item.type === 2">
                    <y-shelf :title="item.name">
                        <div slot="content" class="hot">
                            <mall-goods1 :msg="iitem" v-for="(iitem,j) in item.panelContents" :key="j"></mall-goods1>
                        </div>
                    </y-shelf>
                </section>

                <section class="w mt30 clearfix" v-if="item.type === 3">
                    <y-shelf :title="item.name">
                        <div slot="content" class="floors">
                            <div class="imgbanner" v-for="(iitem,j) in item.panelContents" :key="j"
                                 v-if="iitem.type === 2 || iitem.type === 3" @click="linkTo(iitem)">
                                <img v-lazy="iitem.picUrl">
                                <a class="cover-link"></a>
                            </div>
                            <mall-goods :msg="iitem" v-for="(iitem,j) in item.panelContents" :key="j+'key'"
                                        v-if="iitem.type != 2 && iitem.type != 3"></mall-goods>
                        </div>
                    </y-shelf>
                </section>

            </div>
        </div>
        <y-footer></y-footer>
    </div>
</template>
<script>
    import YHeader from './common/header'
    import YFooter from './common/footer'
    import YShelf from '../components/shelf'
    import product from '../components/product'
    import mallGoods from '../components/mallGoods'
    import mallGoods1 from '../components/mallGoods1'
    // @ is an alias to /src
    export default {
        name: 'home',
        data() {
            return {
                error: false,
                banner: [{
                    "id": 32,
                    "panelId": 7,
                    "type": 0,
                    "productId": "bankruptcy",
                    "sortOrder": 1,
                    "fullUrl": "",
                    "picUrl": "https://liquidation-1.oss-cn-hangzhou.aliyuncs.com/ab9bd58c163cdf470f1af161233ecbfe.png",
                    "picUrl2": "",
                    "picUrl3": "",
                    "created": 1523968862000,
                    "updated": 1523969921000,
                    "salePrice": 1.00,
                    "productName": "",
                    "subTitle": "",
                    "productImageBig": "https://liquidation-1.oss-cn-hangzhou.aliyuncs.com/ab9bd58c163cdf470f1af161233ecbfe.png"
                }, {
                    "id": 33,
                    "panelId": 7,
                    "type": 0,
                    "productId": "shares",
                    "sortOrder": 2,
                    "fullUrl": "",
                    "picUrl": "https://liquidation-1.oss-cn-hangzhou.aliyuncs.com/e4216d151a0a3dea17402eb3549050cc.png",
                    "picUrl2": "",
                    "picUrl3": "",
                    "created": 1523970502000,
                    "updated": 1524192439000,
                    "salePrice": 1.00,
                    "productName": "",
                    "subTitle": "",
                    "productImageBig": ""
                }, {
                    "id": 34,
                    "panelId": 7,
                    "type": 0,
                    "productId": "road",
                    "sortOrder": 3,
                    "fullUrl": null,
                    "picUrl": "https://liquidation-1.oss-cn-hangzhou.aliyuncs.com/b0adb5a1449e5f0056076debcd4c408b.jpg",
                    "picUrl2": "",
                    "picUrl3": "",
                    "created": 1523970510000,
                    "updated": 1523970512000,
                    "salePrice": 1.00,
                    "productName": "",
                    "subTitle": "",
                    "productImageBig": "https://s1.ax1x.com/2018/05/19/Ccdiid.png"
                }],
                mark: 0,
                bgOpt: {
                    px: 0,
                    py: 0,
                    w: 0,
                    h: 0
                },
                home: [{
                    "id": 10,
                    "name": "法务平台",
                    "type": 3,
                    "sortOrder": 4,
                    "position": 0,
                    "limitNum": 7,
                    "status": 1,
                    "remark": null,
                    "created": 1524066632000,
                    "updated": 1524066635000,
                    "panelContents": [{
                        "id": 40,
                        "panelId": 10,
                        "type": 0,
                        "productId": "bankruptcy",
                        "sortOrder": 0,
                        "fullUrl": "http://xmall.exrick.cn/#/goods?cid=1184",
                        "picUrl": "https://resource.smartisan.com/resource/z/zhoubianshangpin1220858web.jpg",
                        "picUrl2": null,
                        "picUrl3": null,
                        "created": 1524067373000,
                        "updated": 1524194159000,
                        "salePrice": null,
                        "productName": "司法破产清算重整系统",
                        "subTitle": "案件管理人在线处置操作各项事务",
                        "productImageBig": "https://photo.16pic.com/00/26/85/16pic_2685337_b.jpg"
                    }, {
                        "id": 41,
                        "panelId": 10,
                        "type": 0,
                        "productId": "shares",
                        "sortOrder": 1,
                        "fullUrl": "",
                        "picUrl": "https://resource.smartisan.com/resource/2f9a0f5f3dedf0ed813622003f1b287b.jpg",
                        "picUrl2": null,
                        "picUrl3": null,
                        "created": 1524067376000,
                        "updated": 1524155076000,
                        "salePrice": 199.00,
                        "productName": "证券集合类投票征集托管系统",
                        "subTitle": "解决小股东维权难、起诉难、成本高等问题",
                        "productImageBig": "http://www.fahuidata.com/creditor/share/static/img/carousel2.a3861d9.png"
                    }]
                }, {
                    "id": 3,
                    "name": "数据智能",
                    "type": 3,
                    "sortOrder": 5,
                    "position": 0,
                    "limitNum": 7,
                    "status": 1,
                    "remark": "",
                    "created": 1524066559000,
                    "updated": 1523962455000,
                    "panelContents": [{
                        "id": 2,
                        "panelId": 3,
                        "type": 0,
                        "productId": "road",
                        "sortOrder": 1,
                        "fullUrl": "",
                        "picUrl": "https://photo.16pic.com/00/72/95/16pic_7295176_b.jpg",
                        "picUrl2": null,
                        "picUrl3": null,
                        "created": 1506096182000,
                        "updated": 1524155020000,
                        "salePrice": 2699.00,
                        "productName": "道路交通保险自动理赔系统",
                        "subTitle": "医疗凭证识别系统、智能理赔处理系统及理赔调解系统",
                        "productImageBig": "https://photo.16pic.com/00/72/95/16pic_7295176_b.jpg"
                    }]
                }, {
                    "id": 9,
                    "name": "合作伙伴",
                    "type": 2,
                    "sortOrder": 7,
                    "position": 0,
                    "limitNum": 4,
                    "status": 1,
                    "remark": "",
                    "created": null,
                    "updated": 1524110267000,
                    "panelContents": [{
                        "id": 36,
                        "panelId": 9,
                        "type": 0,
                        "productId": "https://www.brop.cn/",
                        "sortOrder": 1,
                        "fullUrl": "https://blog.brop.cn/wp-content/uploads/2018/10/header-logo1.png",
                        "picUrl": "https://blog.brop.cn/wp-content/uploads/2018/10/header-logo1.png",
                        "picUrl2": null,
                        "picUrl3": null,
                        "created": 1524066705000,
                        "updated": 1524196985000,
                        "salePrice": 1.00,
                        "productName": "中国印钞总公司区块链研究院",
                        "subTitle": "",
                        "productImageBig": "https://blog.brop.cn/wp-content/uploads/2018/10/header-logo1.png"
                    }, {
                        "id": 37,
                        "panelId": 9,
                        "type": 0,
                        "productId": "http://www.icbc.com.cn/icbc/",
                        "sortOrder": 2,
                        "fullUrl": "https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/014754fb5981caca680c836e376d3852_222_222.jpg",
                        "picUrl": "https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/014754fb5981caca680c836e376d3852_222_222.jpg",
                        "picUrl2": null,
                        "picUrl3": null,
                        "created": 1524066711000,
                        "updated": 1524196999000,
                        "salePrice": 1.00,
                        "productName": "中国工商银行",
                        "subTitle": "",
                        "productImageBig": "https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/014754fb5981caca680c836e376d3852_222_222.jpg"
                    }, {
                        "id": 38,
                        "panelId": 9,
                        "type": 0,
                        "productId": "http://www.zhehang.com/",
                        "sortOrder": 3,
                        "fullUrl": "http://azichanimg.img-cn-beijing.aliyuncs.com//file/047df66f-48c9-4c59-803e-238a89855cba.jpg@4e_0o_0l_300h_300w_90q.src",
                        "picUrl": "http://azichanimg.img-cn-beijing.aliyuncs.com//file/047df66f-48c9-4c59-803e-238a89855cba.jpg@4e_0o_0l_300h_300w_90q.src",
                        "picUrl2": null,
                        "picUrl3": null,
                        "created": 1524066718000,
                        "updated": 1524197011000,
                        "salePrice": 1.00,
                        "productName": "浙江浙杭律师事务所",
                        "subTitle": "",
                        "productImageBig": "http://azichanimg.img-cn-beijing.aliyuncs.com//file/047df66f-48c9-4c59-803e-238a89855cba.jpg@4e_0o_0l_300h_300w_90q.src"
                    }, {
                        "id": 39,
                        "panelId": 9,
                        "type": 0,
                        "productId": "http://www.bmsoft.com.cn/",
                        "sortOrder": 4,
                        "fullUrl": "https://zhengxin-pub.bj.bcebos.com/logopic/4f03bcef0dc6b4a4abce5fe425c06351_fullsize.jpg@s_1,w_484,h_484",
                        "picUrl": "https://zhengxin-pub.bj.bcebos.com/logopic/4f03bcef0dc6b4a4abce5fe425c06351_fullsize.jpg@s_1,w_484,h_484",
                        "picUrl2": null,
                        "picUrl3": null,
                        "created": 1524066722000,
                        "updated": 1524197021000,
                        "salePrice": 1.00,
                        "productName": "北明软件有限公司",
                        "subTitle": "",
                        "productImageBig": "https://zhengxin-pub.bj.bcebos.com/logopic/4f03bcef0dc6b4a4abce5fe425c06351_fullsize.jpg@s_1,w_484,h_484"
                    }]
                }],
                loading: false,
                notify: '1',
                dialogVisible: false,
                timer: ''
            }
        },
        components: {
            YHeader,
            YFooter,
            YShelf,
            product,
            mallGoods,
            mallGoods1
        },
        methods: {
            autoPlay() {
                this.mark++
                if (this.mark > this.banner.length - 1) {
                    // 当遍历到最后一张图片置零
                    this.mark = 0
                }
            },
            play() {
                // 每2.5s自动切换
                this.timer = setInterval(this.autoPlay, 2500)
            },
            change(i) {
                this.mark = i
            },
            startTimer() {
                this.timer = setInterval(this.autoPlay, 2500)
            },
            stopTimer() {
                clearInterval(this.timer)
            },
            linkTo(item) {
                if (item.type === 0 || item.type === 2) {
                    // 关联商品
                    this.$router.push({
                        path: item.productId
                    })
                } else {
                    // 完整链接
                    window.location.href = item.fullUrl
                }
            },
            bgOver(e) {
                this.bgOpt.px = e.offsetLeft
                this.bgOpt.py = e.offsetTop
                this.bgOpt.w = e.offsetWidth
                this.bgOpt.h = e.offsetHeight
            },
            bgMove(dom, eve) {
                let bgOpt = this.bgOpt
                let X, Y
                let mouseX = eve.pageX - bgOpt.px
                let mouseY = eve.pageY - bgOpt.py
                if (mouseX > bgOpt.w / 2) {
                    X = mouseX - (bgOpt.w / 2)
                } else {
                    X = mouseX - (bgOpt.w / 2)
                }
                if (mouseY > bgOpt.h / 2) {
                    Y = bgOpt.h / 2 - mouseY
                } else {
                    Y = bgOpt.h / 2 - mouseY
                }
                dom.style['transform'] = `rotateY(${X / 50}deg) rotateX(${Y / 50}deg)`
                dom.style.transform = `rotateY(${X / 50}deg) rotateX(${Y / 50}deg)`
            },
            bgOut(dom) {
                dom.style['transform'] = 'rotateY(0deg) rotateX(0deg)'
                dom.style.transform = 'rotateY(0deg) rotateX(0deg)'
            }
        },
        mounted() {
        },
        created() {
            this.play()
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    .home {
        display: flex;
        flex-direction: column;
    }

    .no-info {
        padding: 100px 0;
        text-align: center;
        font-size: 30px;
        display: flex;
        flex-direction: column;

        .no-data {
            align-self: center;
        }
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }

    .fade-enter, .fade-leave-to {
        opacity: 0;
    }

    .page {
        position: absolute;
        width: 100%;
        top: 470px;
        z-index: 30;

        .dots {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            .dot-active {
                display: inline-block;
                width: 15px;
                height: 15px;
                background-color: whitesmoke;
                border-radius: 8px;
                margin-right: 10px;
                cursor: pointer;
            }

            .dot {
                opacity: 0.2;
            }
        }
    }

    .activity-panel {
        width: 1220px;
        margin: 0 auto;

        .box {
            overflow: hidden;
            position: relative;
            z-index: 0;
            margin-top: 25px;
            box-sizing: border-box;
            border: 1px solid rgba(0, 0, 0, .14);
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 3px 8px -6px rgba(0, 0, 0, .1);
        }

        .content {
            float: left;
            position: relative;
            box-sizing: border-box;
            width: 25%;
            height: 200px;
            text-align: center;
        }

        .content ::before {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            box-sizing: border-box;
            border-left: 1px solid #f2f2f2;
            border-left: 1px solid rgba(0, 0, 0, .1);
            width: 100%;
            height: 100%;
            content: "";
            pointer-events: none;
        }

        .i {
            width: 305px;
            height: 200px;
        }

        .cover-link {
            cursor: pointer;
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 4;
            background: url() repeat;
        }

        a {
            color: #5079d9;
            cursor: pointer;
            transition: all .15s ease-out;
            text-decoration: none;
        }

        a:hover {
            box-shadow: inset 0 0 38px rgba(0, 0, 0, .08);
            transition: all .15s ease;
        }
    }

    .banner, .banner span, .banner div {
        font-family: "Microsoft YaHei";
        transition: all .3s;
        transition-timing-function: linear;
    }

    .banner {
        cursor: pointer;
        perspective: 3000px;
        position: relative;
        z-index: 19;
        margin: 0 auto;
        width: 1220px;
    }

    .bg {
        position: relative;
        width: 1220px;
        height: 500px;
        margin: 20px auto;
        background-size: 100% 100%;
        border-radius: 10px;
        transform-style: preserve-3d;
        transform-origin: 50% 50%;
        transform: rotateY(0deg) rotateX(0deg);

        & div {
            position: relative;
            height: 100%;
            width: 100%;
        }
    }

    .img1 {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        border-radius: 10px;
    }

    .img2 {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 5px;
        left: 0;
        background-size: 95% 100%;
        border-radius: 10px;
    }

    .img3 {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        border-radius: 10px;
    }

    .a {
        z-index: 20;
        transform: translateZ(40px);
    }

    .b {
        z-index: 20;
        transform: translateZ(30px);
    }

    .c {
        transform: translateZ(0px);
    }

    .sk_item {
        width: 170px;
        height: 225px;
        padding: 0 14px 0 15px;

        > div {
            width: 100%;
        }

        a {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: all .3s;

            &:hover {
                transform: translateY(-5px);
            }
        }

        img {
            width: 130px;
            height: 130px;
            margin: 17px 0;
        }

        .sk_item_name {
            color: #999;
            display: block;
            max-width: 100%;
            _width: 100%;
            overflow: hidden;
            font-size: 12px;
            text-align: left;
            height: 32px;
            line-height: 16px;
            word-wrap: break-word;
            word-break: break-all;
        }

        .sk_item_price {
            padding: 3px 0;
            height: 25px;
        }

        .price_new {
            font-size: 18px;
            font-weight: 700;
            margin-right: 8px;
            color: #f10214;
        }

        .price_origin {
            color: #999;
            font-size: 12px;
        }
    }

    .box {
        overflow: hidden;
        position: relative;
        z-index: 0;
        margin-top: 29px;
        box-sizing: border-box;
        border: 1px solid rgba(0, 0, 0, .14);
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 3px 8px -6px rgba(0, 0, 0, .1);

    }

    ul.box {
        display: flex;

        li {
            flex: 1;

            img {
                display: block;
                width: 305px;
                height: 200px;
            }
        }
    }

    .mt30 {
        margin-top: 30px;
    }

    .hot {
        display: flex;

        > div {
            flex: 1;
            width: 25%;
        }
    }

    .floors {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .imgbanner {
            width: 50%;
            height: 430px;

            .cover-link {
                cursor: pointer;
                display: block;
                position: absolute;
                top: 60px;
                left: 0;
                width: 50%;
                height: 430px;
                z-index: 4;
                background: url() repeat;
            }

            .cover-link:hover {
                box-shadow: inset 0 0 38px rgba(0, 0, 0, .08);
                transition: all .15s ease;
            }
        }

        img {
            display: block;
            width: 100%;
            height: 100%;
        }
    }

</style>

